<template>
  <div style="text-align: center">
    <Row :gutter="20" style="margin-top:10px;">
      <Col span="8"
           >
      <div id="myChart" v-if="this.line.length > 0" class="echarts-box"
           :style="{width: '100%', height: '360px'}"></div>
      <div class="typeSanBox echarts-box" v-else >
                     <div>
                         <img src="../../../assets/images/process-no-data.png" />
                         <span>暂无数据</span>
                     </div>
                 </div>
      </Col>
      <Col span="8"
          >
      <div id="myChart1" v-if="this.pie.length > 0" class="echarts-box"
           :style="{width: '98%', height: '360px'}"></div>
           <div class="typeSanBox echarts-box" v-else >
              <div>
                  <img src="../../../assets/images/process-no-data.png" />
                  <span>暂无数据</span>
              </div>
          </div>
      </Col>
      <Col span="8"
           >
      <div id="myChart2" v-if="this.pie1.length > 0" class="echarts-box"
           :style="{width: '98%', height: '360px'}"></div>
           <div class="typeSanBox echarts-box" v-else >
               <div>
                   <img src="../../../assets/images/process-no-data.png" />
                   <span>暂无数据</span>
               </div>
           </div>
      </Col>
    </Row>
  </div>
</template>
<script>
export default {
  props: ['line','pie','pie1'],
  data() {
    return {
    }
  },
  mounted() {
    if(this.line.length > 0) {
       this.drawLine1()
    }

    if(this.pie.length > 0) {
      this.pieChart()
    }
    if(this.pie1.length > 0) {
      this.pieChart2()
    }
  },
  methods: {
    drawLine1() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        color: ['#5B8FF9'],
        title: {
          text: '风险等级',
          subtext: '',
          left: 'left',
          textStyle:{
               fontWeight:'bold',
               color:'#697786',
               fontSize:14
           }
        },
        tooltip: {},
        xAxis: {
          data: this.line.length> 0 ? ['I级', 'II级', 'III级', 'Ⅳ级'] : []
        },
        yAxis: {},
        series: [
          {
            // name: '销量',
            type: 'bar',
            data: this.line,
            barWidth: 26 //柱图宽度
          }
        ]
      })
    },
    pieChart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart1'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: '措施方案',
          subtext: '',
          left: 'left',
          textStyle:{
              fontWeight:'bold',
              color:'#697786',
              fontSize:14
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          bottom: '80',
          right: '25',
          data: this.pie.length> 0 ? ['通用', '技术'] : []
        },
        series: [
          {
            name: '措施方案',
            type: 'pie',
            radius: ['35%', '50%'], //设置饼图大小
            center: ['35%', '50%'], //设置饼图位置
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '0',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: this.pie.length> 0 ? [
              { value: this.pie[0], name: '通用', itemStyle: { color: '#5B8FF9' } },
              { value: this.pie[1], name: '技术', itemStyle: { color: '#5AD8A6' } },
            ] : []
          }
        ]
      })
    },
    pieChart2() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart2'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: '方案来源',
          subtext: '',
          left: 'left',
          textStyle:{
              fontWeight:'bold',
              color:'#697786',
              fontSize:14
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          bottom: '80',
          right: '25',
          data: this.pie1.length> 0 ? ['自建', '引用'] : []
        },
        series: [
          {
            name: '方案来源',
            type: 'pie',
            radius: ['35%', '50%'], //设置饼图大小
            center: ['35%', '50%'], //设置饼图位置
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '0',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: this.pie1.length> 0 ? [
              { value: this.pie1[0], name: '自建', itemStyle: { color: '#5B8FF9' } },
              { value: this.pie1[1], name: '引用', itemStyle: { color: '#5AD8A6' } },

            ] : []
          }
        ]
      })
    }
  }
}
</script>
<style scoped>
#myChart {
  width: 100%;
}
.echarts-box {
  background: rgba(0, 59, 152, 0.02);
}
.nodata {
			width: 90%;
			position: absolute;
			top: 50%;
			text-align: center;
			transform: translateY(-50%);
			float: right;
			left: 10%
		}
</style>